<template>
    <view class="content">
        <view class="content__body">
            <uv-navbar :placeholder="true" bgColor="transparent" :fixed="false">
                <template #left>
                    <uv-tabs :activeStyle="{color:'#000',fontWeight:'bold'}" :inactiveStyle="{color:'#000'}"
                        :lineColor="`url(${lineBg}) 100% 100%`" :list="[{name:'推荐'},{name:'银翎汇'}]"></uv-tabs>
                </template>
            </uv-navbar>
            <view class="mt-10">
                <uv-input prefix-icon="search" prefix-icon-style="color:#9078e8" shape="circle" border="none"
                    placeholder="搜索你感兴趣的测评"
                    :customStyle='{background:"#f6f8fa",height:"60rpx",padding:"10rpx 20rpx"}'></uv-input>
            </view>
            <view class="my-30">
                <uv-swiper :list="lists"></uv-swiper>
            </view>
            <FunctionButtonGroup :iconInfo='[{
                                icon:" fx-e601", iconColor:"red", iconSize:"50rpx", name:"心理测评",path:"/pages/task/index" },{ icon:"fx-e7a0", iconColor:"yellow",
                                name:"活动报名",path:"/pages/active/index" },{ icon:"fx-e7a0", iconColor:"blue",
                                iconSize:"50rpx", name:"知识分享" ,path:"/pages/article/index"},{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
                                name:"学习课堂",tag:"未开播" }]'>
            </FunctionButtonGroup>
            <view class="card mb-30">
                <view class="card__side card__side--left">
                    <view class="card__content">
                        <view class="card__title">翎听你说</view>
                        <view class="card__desc">悄悄话，喵一声就好</view>
                        <view class="card__num">122222人</view>
                        <view class="card__sub-desc">在这里选择了咨询师</view>
                        <view class="card__btn">
                            <MyButton title="马上咨询 ▶" @click="consult" :customStyles='{"margin-top":"20px"}'
                                bgColor="#6a64d2" color="#fff">
                            </MyButton>
                        </view>
                    </view>
                </view>
                <view class="card__side card__side--right">
                    <view class="card__content">
                        <view class="card__title">心翎喵盒</view>
                        <view class="card__desc">悄悄话，喵一声就好</view>
                    </view>
                    <view class="card__content">
                        <view class="card__title">心翎专家联盟</view>
                        <view class="card__desc">让您的专业被千万用户看见</view>
                    </view>
                </view>
            </view>
            <Card :titleBar="{title:'任务中心',subtitle:'您还有未完成任务，快来参与吧！'}" titleBarStyle="icon">
                <template #content>
                    <view class="bgc-ffffff">
                        <uv-list>
                            <uv-list-item>
                                <template #header>
                                    <uv-image shape="circle" width="35" height="35" src="/static/logo.png"></uv-image>
                                </template>
                                <template #body>
                                    <view class="flex flex-1 flex-col ml-20">
                                        <view class="fw-600 fs-28">心理评测任务</view>
                                        <view class="fs-22">您还有
                                            <text style="color: #d782ff;">2</text>
                                            项未完成的公司员工测评任务哦！
                                        </view>
                                    </view>
                                </template>
                                <template #footer>
                                    <uv-button color="#e5d9ff" text="去测评" shape="circle"
                                        :customStyle="{color:'#9b59f8',height:'60rpx'}" @click="toTask"></uv-button>
                                </template>
                            </uv-list-item>
                            <uv-list-item :border="true">
                                <template #header>
                                    <uv-image shape="circle" width="35" height="35" src="/static/logo.png"></uv-image>
                                </template>
                                <template #body>
                                    <view class="flex flex-1 flex-col ml-20">
                                        <view class="fw-600 fs-28">观看学习任务</view>
                                        <view class="fs-22">您还有
                                            <text style="color: #d782ff;">未观看</text>
                                            的视频任务，快来解锁吧！
                                        </view>
                                    </view>
                                </template>
                                <template #footer>
                                    <uv-button color="#e5d9ff" text="去学习" shape="circle"
                                        :customStyle="{color:'#9b59f8',height:'60rpx'}" @click="toStudy"></uv-button>
                                </template>
                            </uv-list-item>
                            <uv-list-item :border="true">
                                <template #header>
                                    <uv-image shape="circle" width="35" height="35" src="/static/logo.png"></uv-image>
                                </template>
                                <template #body>
                                    <view class="flex flex-1 flex-col ml-20">
                                        <view class="fw-600 fs-28">活动打卡签到</view>
                                        <view class="fs-22">您还有
                                            <text style="color: #d782ff;">未完成</text>
                                            的活动任务，快来参与吧！
                                        </view>
                                    </view>
                                </template>
                                <template #footer>
                                    <uv-button color="#e5d9ff" text="去完成" shape="circle"
                                        :customStyle="{color:'#9b59f8',height:'60rpx'}" @click="toSign"></uv-button>
                                </template>
                            </uv-list-item>
                        </uv-list>
                        <!-- <List title="心理测评任务" :titleBlod="true" subTitle="探索你的性格类型,了解行为模式与职业倾向" extraInfoLayout="task"
                            :taskInfo="{key:2,text:'的视屏任务，快来解锁吧'}" :priceInfo='{current:12,original:19}'
                            imageHeight="50" imageWidth="50" imagePosition="left" extraLabel="心理科普"
                            extraLabelStyle="fill"
                            :buttonStyleConfig="{text:'测试',width:'80rpx',height:'60rpx',transition:true}"
                            :extraInfo='["1.22万阅读","280评论","650点赞"]' extraLabelColor='#9E4CD1' imageRadius="20rpx" /> -->
                    </view>
                </template>
            </Card>

            <Card titleBarStyle="slot" background="#fff">
                <template #titleBar>
                    <view class="py-20">
                        <uv-tabs :list="[{name:'免费测评'},{name:'精选课程榜'},{name:'最新活动报名'}]"
                            :activeStyle="{color:'#232841',borderRadius:'30rpx',padding:'10rpx 20rpx',fontWeight:'bold'}"
                            :customStyle='{display:"inline-block"}' lineColor="transparent"
                            :itemStyle="{height:'auto',padding:'0'} "
                            :inactiveStyle="{padding:'10rpx 20rpx'}"></uv-tabs>
                    </view>
                </template>
                <template #content>
                    <uv-list>
                        <uv-list-item>
                            <template #header>
                                <uv-image width="55" height="55" src="/static/logo.png"></uv-image>
                            </template>
                            <template #body>
                                <view class="flex flex-1 flex-col ml-20 justify-between">
                                    <view class="fw-600 fs-30">自我焦虑程度评估</view>
                                    <view class="fs-22 c-cccccc">
                                        1200人已测 · 3分钟
                                    </view>
                                </view>
                            </template>
                            <template #footer>
                                <view class="flex items-center">
                                    <uv-button color="#8772e6" text="去测评" shape="circle"
                                        :customStyle="{color:'#fff',height:'60rpx'}" @click="toTask"></uv-button>
                                </view>
                            </template>
                        </uv-list-item>
                    </uv-list>
                    <!-- <List v-for="i in 4" title="自我焦虑程度评估" :titleBlod="true" subTitle="探索你的性格类型,了解行为模式与职业倾向"
                        extraInfoLayout="task" imageHeight="150" imageWidth="150" imagePosition="left" extraLabel="心理科普"
                        extraLabelStyle="fill"
                        :buttonStyleConfig="{text:'测试',width:'90rpx',height:'60rpx',color:'#fff',transition:true}"
                        :extraInfo='["1.22万阅读","280评论","650点赞"]' extraLabelColor='#9E4CD1' imageRadius="20rpx" /> -->
                </template>
            </Card>
            <Card :titleBar="{title:'热门文章',subtitle:'每日阅读优质文章，让知识丰盈内心'}">
                <template #content>
                    <view v-for="i in 4" class="p-20" @click="toArticle">
                        <List title="心理健康，从了解开始--心之翔心理测评，守护你的每一份情绪。" :titleBlod="false" subTitle="探索你的性格类型,了解行为模式与职业倾向"
                            extraInfoLayout="normal" imageHeight="120" imageWidth="120" imagePosition="left"
                            extraLabel="心理科普" extraLabelStyle="fill" :extraInfo='["1.22万阅读","280评论","650点赞"]'
                            extraLabelColor='#9E4CD1' imageRadius="20rpx" />
                    </view>
                </template>
            </Card>
        </view>

        <!-- <uv-popup mode="bottom" ref="popup">
            <view>123</view>
        </uv-popup> -->
        <!-- <uv-vtabs></uv-vtabs> -->
        <!-- <uv-tabs :list="list">
            <template v-slot:right>
                <view style="padding-left: 4px;">
                    <uv-icon name="list" size="21" bold></uv-icon>
                </view>
            </template>
        </uv-tabs> -->
        <!-- <uv-tabs :list="list"
            :activeStyle="{background:'#ebe9f0',color:'#232841',borderRadius:'30rpx',padding:'10rpx 20rpx',fontWeight:'bold'}"
            :customStyle='{background:"#f6f8fa",borderRadius:"30rpx",display:"inline-block"}' lineColor="transparent"
            :itemStyle="{height:'auto',padding:'0'} " :inactiveStyle="{padding:'10rpx 20rpx'}"></uv-tabs> -->
        <!-- <uv-input prefix-icon="search" prefix-icon-style="color:#9078e8" shape="circle" border="none"
            placeholder="搜索你感兴趣的测评"
            :customStyle='{background:"#f6f8fa",height:"60rpx",padding:"10rpx 20rpx"}'></uv-input> -->
        <!-- <Card background="/static/logo.png" titleBarStyle="slot">
            <template #titleBar>
                1232
            </template>
            <template #content>
                123233
            </template>
        </Card> -->
        <!-- <FunctionButtonGroup :iconInfo='[{
            icon:" fx-e601", iconColor:"red", iconSize:"50rpx", name:"心理测评" },{ icon:"fx-e7a0", iconColor:"yellow",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"blue",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
            iconSize:"50rpx", name:"学习课堂" },{ icon:"fx-e7a0", iconColor:"yellow",
            name:"学习课堂",tag:"未开播" }]'>
        </FunctionButtonGroup> -->
        <!-- <List title="心理健康，从了解开始--心之翔心理测评，守护你的每一份情绪。" :titleBlod="true" subTitle="探索你的性格类型,了解行为模式与职业倾向"
            extraInfoLayout="task" :taskInfo="{key:2,text:'的视屏任务，快来解锁吧'}" :priceInfo='{current:12,original:19}'
            imageHeight="150" imageWidth="150" imagePosition="left" extraLabel="心理科普" extraLabelStyle="fill"
            :buttonStyleConfig="{text:'测试',width:'80rpx',height:'60rpx',transition:true}"
            :extraInfo='["1.22万阅读","280评论","650点赞"]' extraLabelColor='#9E4CD1' imageRadius="20rpx" /> -->
    </view>
    <!-- <TabBar ref="tabBar" @tab-bar-height-ready="onTabBarHeightReady" /> -->
</template>

<script setup lang="ts">
    import {
        ref,
        onMounted,
    } from 'vue';
    const lineBg =
        "";
    import MyButton from "@/components/Button.vue";
    import FunctionButtonGroup from "@/components/FunctionButtonGroup.vue"
    import Card from "@/components/Card.vue";
    import List from "@/components/ListComponent.vue";
    import TabBar from "@/components/TabBar.vue";
    import {
        getArticleCategory
    } from "@/src/api/article.ts";
    const lists = [
        'https://dgss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2567357971,260679606&fm=30&app=106&f=JPEG?w=312&h=208&s=9D1226D81A9428416A111D15030010D8',
        'https://dgss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2567357971,260679606&fm=30&app=106&f=JPEG?w=312&h=208&s=9D1226D81A9428416A111D15030010D8',
        'https://dgss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2567357971,260679606&fm=30&app=106&f=JPEG?w=312&h=208&s=9D1226D81A9428416A111D15030010D8',
    ];
    const list = [{
        name: '综合'
    },
    {
        name: '最新'
    },
    {
        name: '人气'
    }
    ];
    let tabBarHeight = ref(0);
    const onTabBarHeightReady = (height : any) => {
        tabBarHeight.value = height;
    }
    onMounted(() => {
        getArticleCategory().then(res => {
            console.log(res)
        });

    });
    const toArticle = () => {
        uni.navigateTo({
            url: "/pages/article/detail"
        })
    }
    const toStudy = () => {
        uni.navigateTo({
            url: "/pages/course/index"
        })
    }
    const toSign = () => {
        uni.navigateTo({
            url: "/pages/active/sign"
        })
    }
    const toTask = () => {
        uni.navigateTo({
            url: "/pages/task/index"
        })
    }
    //  咨询操作
    const consult = () => {
        console.log('2323')
    }
</script>

<style lang="scss" scoped>
    .content {
        background: linear-gradient(to bottom, #a499f8, #f1f3ff);

        //padding-bottom: 140rpx;

        &__body {
            padding: 20rpx;
        }

        .card {
            @include flex-center;
            gap: 16rpx;


            &__content {
                flex: 1;
                border-radius: 12rpx;
                padding: 0rpx 40rpx;
                background-color: #e2dcff;
            }

            &__title {
                margin-top: 20rpx;
                font-weight: bold;
                font-size: 30rpx;
            }

            &__desc {
                font-size: 22rpx;
                margin-top: 10rpx;
            }

            &__num {
                margin-top: 30rpx;
                color: #6374c9;
                font-weight: bold;
            }

            &__sub-desc {
                font-size: 22rpx;
                margin-top: 5rpx;
                color: #777eb8;
            }

            &__side {
                flex: 1;
                height: 360rpx;
                display: flex;
                flex-direction: column;

                &--left {}

                &--right {
                    gap: 16rpx;





                }
            }



        }
    }
</style>